<template>
	<view class="city">
		<view class="title">
			当前城市
		</view>
		<view class="city">
			<view class="tag-item">
				{{store.city.name}}
			</view>
		</view>
		<view class="title">
			热门城市
		</view>
		<view class="hots">
			<view class="tag-item" @click="changeCity({item:{name:tag}})" v-for="(tag,index) in store.hotsList" :key="index">
				{{tag}}
			</view>
		</view>
		<uni-indexed-list class="select-list" :options="store.cityList" :showSelect="false"
			@click="changeCity"></uni-indexed-list>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import {
		useGlobalStore
	} from "@/stores/global.js";
	const store = useGlobalStore();
	const changeCity = (data) => {
		let item = store.cacheList.find(el => el.nm == data.item.name);
		store.city.name = item.nm;
		store.city.id = item.id;
		uni.navigateBack();
	};
</script>

<style lang="scss" scoped>
	.city {
		width: 100%;

		.title {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			margin: 20rpx 0;
			background-color: var(--gray3);
		}

		.tag-item {
			border: 2rpx solid var(--gray2);
			padding: 10rpx 20rpx;
			margin: 0 10rpx 10rpx 0;
			border-radius: 6rpx;
		}

		.city {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
		}

		.hots {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			display: flex;
			flex-wrap: wrap;
		}

		.select-list {
			position: static;
			background-color: var(--gray4);
		}
	}
</style>